<!DOCTYPE html>

<head>
	<meta charset="utf-8">
	<title>攻击路径分析</title>
	<!--//该页面应用的是echarts2.0-->
	<script src="lib/echarts-2.2.7/build/dist/echarts.js"></script>
	<!--引入Jquery-->
	<script type="text/javascript" src="lib/jquery-3.1.1.js"></script>
	<!--引入bootstrap文件-->
	<link rel="stylesheet" type="text/css" href="lib/bootstrap-3.3.7/css/bootstrap.min.css">
	<script src="lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
	<!--以下的引用全部和同源攻击相同-->
	<!--精确到秒的datapiker-->
	<link type="text/css" href="lib/common_attack_source_analysis/css/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
	<link type="text/css" href="lib/common_attack_source_analysis/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-1.8.17.custom.min.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="lib/common_attack_source_analysis/js/jquery-ui-timepicker-zh-CN.js"></script>
	<!--带提示的输入框-->
	<link type="text/css" rel="stylesheet" href="lib/common_attack_source_analysis/css/fm.tagator.jquery.css" />

	<script type="text/javascript" src="lib/common_attack_source_analysis/js/fm.tagator.jquery.js"></script>
	<script src="lib/echarts-2.2.7/build/dist/echarts-all.js"></script>
</head>

<body>

	<script>
		//预先设定一些ips
		$.ajaxSetup({
			async: false
		});
		
		/*等待联调*/
				//var data = 接口（）；
		$.get('static/data/common_attack_source_analysis/data.json', function(data) {
			ip_array = [];
			var nodes = data.data.nodes;
			nodes.forEach(function(item, i) {
				ip_array.push(item.name);
			});

		});
		//console.log(ips_array);
	</script>
	<script>
		//自动补全
		$(function() {

			if($('#inputTagator').data('tagator') === undefined) {
				$('#inputTagator').tagator({
					autocomplete: ip_array
				});

			} else {
				$('#inputTagator').tagator('destroy');

			}

		})
	</script>

	<div class="row" style="align-content: center;">
		<center>
			<span>起始时间：<input type="text" id="start_time" class="ui_timepicker" value=""></span>
			<span>结束时间：<input type="text" id="end_time" class="ui_timepicker" value=""></span> 请输入攻击者IP：
			<input id="inputTagator" name="inputTagator" class="inputTagator" style="width: 200px;">
			<button id="getvalue" type="button" class="btn btn-success">生成攻击路径图</button>

		</center>
	</div>

	<script>
		$(function() {
			$(".ui_timepicker").datetimepicker({
				//showOn: "button",
				//buttonImage: "./css/images/icon_calendar.gif",
				//buttonImageOnly: true,
				showSecond: true,
				timeFormat: 'hh:mm:ss',
				stepHour: 1,
				stepMinute: 1,
				stepSecond: 1
			})
		})
	</script>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<center>
		<div id="main" style="height:600px"></div>
	</center>
	<script type="text/javascript">
		$("#getvalue").click(function() {
			var search_string = $("#inputTagator").val();
			if(search_string === "")
				alert("请输入攻击IP");
			else {
				var ip_array = [];
				ip_array = search_string.split(",");
				var start_time = $("#start_time").val();
				var end_time = $("#end_time").val();
				console.log(ip_array, start_time, end_time);

				//var data = jiekou;

				all_point_data = [];
				//输入数据
				var input_data = {};
				input_data.starttime = start_time;
				input_data.endtime = end_time;
				input_data.ip = ip_array[0];
				/*等待联调*/
				//var data = 接口（）；
				$.get('static/data/atk_path_asy/data.json', function(data) {
					timeline_point = []; //可能存在排序的情况,数据情况而定
					//全局，对options可见

					var default_value = 10;
					//对外可见
					root_point = $("#inputTagator").val();

					data.data.forEach(function(item, i) {
						var point_tree = {
							'name': '',
							'value': '',
							'children': []
						};
						var one_point_data = {
							'title': {
								'text': '',
							},
							'series': [{
								'data': [],
							}]
						};
						var root_tree = {};
						root_tree.name = root_point;
						root_tree.value = default_value;
						root_tree.children = [];
						//设置temp_tree为全局变量

						timeline_point.push(item.sj);
						var inner_i = 0;
						while(inner_i <= i) {
							point_tree.name = data.data[inner_i].zcmc + "	外网ip:" + data.data[inner_i].wwip + "	内网ip:" + data.data[inner_i].nwip;
							point_tree.value = default_value + i * 10;
							//不考虑被攻击者还有子节点的情况
							root_tree.children.push(point_tree);
							point_tree = {
								'name': '',
								'value': '',
								'children': []
							};
							inner_i++;
						}

						one_point_data.series[0].data.push(root_tree);
						one_point_data.title.text = item.sj + "攻击者路线";
						all_point_data.push(one_point_data);

					});
					console.log(all_point_data);

				});

				// 基于准备好的dom，初始化echarts图表
				var myChart = echarts.init(document.getElementById('main'));
				option = {
					timeline: {
						data: timeline_point,
						label: {
							formatter: function(s) {
								return s.slice(0, 4);
							}
						},
						autoPlay: false,
						playInterval: 1000,
						notMerge: false,
						realtime: true,
						loop: false
					},

					options: [{
							title: {
								'text': '攻击路径',

							},

							calculable: false,

							series: [{
								name: '树图',
								type: 'tree',
								orient: 'horizontal', // vertical horizontal
								rootLocation: {
									x: 400,
									y: 200
								}, // 根节点位置  {x: 100, y: 'center'}
								nodePadding: 20,
								roam: true,
								symbolsize: 20,
								//						symbol:'rectangle',
								itemStyle: {
									normal: {
										label: {
											show: true,
											formatter: "{b}",
											position: 'right',
										},
										lineStyle: {
											color: '#48b',
											shadowColor: '#000',
											shadowBlur: 3,
											shadowOffsetX: 3,
											shadowOffsetY: 5,
											type: 'curve' // 'curve'|'broken'|'solid'|'dotted'|'dashed'

										}
									},
									emphasis: {
										label: {
											show: true,
											formatter: "{b}"
										}
									}
								},
								data: [{
									name: root_point,
									value: 6,
									children: [],
								}]

							}]
						},

					]

				};
				all_point_data.forEach(function(item, i) {
					option.options.push(item);
				});

				// 为echarts对象加载数据 
				myChart.setOption(option);

			}

		});
	</script>
	<script>
	</script>
	<script>
	</script>

</body>